<% include ../header.html %>
<script src="/javascripts/bootstrap/datetimepicker/bootstrap-datetimepicker.js"></script>
<link href="/javascripts/bootstrap/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet">


<script type="text/javascript">

	function queryUser(data){
		$('#info').empty();
		var innerhtml = "";
		for(var i = 0 ; i < data.length ; i ++){
			innerhtml += "<tr><td id='"+data[i]._id+"_usercode'>"+data[i].usercode+
			"</td><td id='"+data[i]._id+"_username'>"+data[i].username+
			"</td><td id='"+data[i]._id+"_gender'>"+data[i].gender+
			"</td><td id='"+data[i]._id+"_birthday'>"+data[i].birthday+
			"</td><td id='"+data[i]._id+"_email'>"+data[i].email+
			"</td><td id='"+data[i]._id+"_role'>"+data[i].role_id.rname+
			"</td></tr>";

		}
		console.log(data);
		console.log(data.length);
		$('#info').html(innerhtml);
	};

	$(document).ready(function(){
		$('#birthday').datetimepicker({
	        language:  'zh-CN',
	        format: 'yyyy-mm-dd',
	        autoclose: true,
	        todayBtn: true,
	        startView: 'month',
	        minView:'month',
	        maxView:'decade'
        });
		// 查询用户
		$.post("/mnguser/quser",{},function(data){
			queryUser(data);
		});
		// 查询角色
		$.post("/mngrole/qrole",{},function(data){
			$('#role').empty();
			var innerhtml = "";
			for(var i = 0 ; i < data.length ; i ++){
				innerhtml += "<option value='"+data[i]._id+"'>"+data[i].rname+"</option>";

			}
			$('#role').html(innerhtml);
		});
		// 注册用户
		$("#registerbtn").click(function(){

			var param = {};
			param.usercode = $("#usercode").val();
			param.password = $("#password").val();
			param.username = $("#username").val();
			param.gender = $("#gender").val();
			param.birthday = $("#birthday").val();
			param.email = $("#email").val();
			param.role = $("#role").val();

			
			$.post('/mnguser',param,function(data){
				console.log(data);
		        if(data.errors){

		          $('#info').before('<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert"> &times;  </a> <strong>警告！</strong>'+data.errors+' </div>');
		          return;
		        }
		        else{
		          	queryUser(data);
		        }
			});
		});
	});
</script>


<div class="bs-docs-header" id="content" tabindex="-1">
  <div class="container">
    <h2>管理用户</h2>
  </div>
</div>

<div class="container">
	<form id="_form">
	<button type="button" class="btn btn-primary" data-toggle="collapse" 
			data-target="#addcontent" id="_add">
		增加
	</button>
	<p>
		<div id="addcontent" class="collapse">
			<input type="text" class="form-horizontal" id="usercode" placeholder="请设置登陆账号">
			<input type="password" class="form-horizontal" id="password" placeholder="请设置密码">
			<input type="text" class="form-horizontal" id="username" placeholder="请输入姓名">
			<select id="gender" class="form-horizontal" style="width:175px;padding:3px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;">
		      <option value="male">男</option>
		      <option value="female">女</option>
		    </select>
			<br/>
			<input type="text" class="form-horizontal" id="birthday" placeholder="请输入生日" data-date-format="yyyy-mm-dd" readonly>
			<input type="text" class="form-horizontal" id="email" placeholder="请输入email">
			<select id="role" class="form-horizontal" style="width:175px;padding:3px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;">
		      
		    </select>
			<button type="button" class="btn btn-warning" style="width:100px;padding:3px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;" id="registerbtn">注册用户</button>
		</div>
	</p>
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>登陆账号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>生日</th>
				<th>email</th>
				<th>角色</th>
			</tr>
		</thead>
		<tbody id = "info">
		</tbody>
	</table>
	</form>
</div>
<% include ../footer.html %>